<template>
    <div class="screen">
      <mt-header title="长期兼职" class="title" style="height:6%">
        <router-link to="/main/homePage" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
      <div class="littleInterval"></div>
      <div id="list_title">
        <div id="list_left">职位列表</div>
        <div class="search">
          <form>
            <tr>
              <td><label class="glyphicon glyphicon-search searchLable"></label></td>
              <td><input type="text" class="form-control glyphicon glyphicon-search" id="serach" placeholder="搜索"></td>
            </tr>

          </form>
        </div>
      </div>
      <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <div class="list_1_div" @click="showDetail">
          <div class="list_2_div"><span class="span_title">琶洲展会兼职</span><span class="span_price">120元/天</span></div>
          <div class="list_3_div"><span class="county">海珠</span><span class="time_slot">3月13日-3月31日</span></div>
          <div class="littleInterval"></div>
        </div>
        <div class="list_1_div" @click="showDetail">
          <div class="list_2_div"><span class="span_title">手机wifi兼职/在家可做/日结</span><span class="span_price">200元/天</span></div>
          <div class="list_3_div"><span class="county">越秀</span><span class="time_slot">长期接受报名</span></div>
          <div class="littleInterval"></div>
        </div>
        <div class="list_1_div" @click="showDetail">
          <div class="list_2_div"><span class="span_title">手机wifi兼职/在家可做/日结</span><span class="span_price">200元/天</span></div>
          <div class="list_3_div"><span class="county">越秀</span><span class="time_slot">长期接受报名</span></div>
          <div class="littleInterval"></div>
        </div>
        <div class="list_1_div" @click="showDetail">
          <div class="list_2_div"><span class="span_title">若比邻超市店员兼职</span><span class="span_price">15元/小时</span></div>
          <div class="list_3_div"><span class="county">天河</span><span class="time_slot">长期接受报名</span></div>
          <div class="littleInterval"></div>
        </div>
        <div class="list_1_div"  @click="showDetail">
          <div class="list_2_div"><span class="span_title">餐厅服务员兼职</span><span class="span_price">15元/小时</span></div>
          <div class="list_3_div"><span class="county">天河</span><span class="time_slot">长期接受报名</span></div>
          <div class="littleInterval"></div>
        </div>
        <div class="list_1_div" v-for="item in list" @click="showDetail">
          <div class="list_2_div"><span class="span_title">地铁安检员兼职</span><span class="span_price">15元/小时</span></div>
          <div class="list_3_div"><span class="county">天河</span><span class="time_slot">长期接受报名</span></div>
          <div class="littleInterval"></div>
        </div>
      </mt-loadmore>
    </div>
</template>

<script>
    export default {
        name: "LongTermJob",
      data(){
        return {
          length:10,
          list:[1,2,3,4,5,6,7,8,9,0],
          allLoaded:false
        }
      },
      methods:{
        loadBottom() {
          // 加载更多数据
          for (let i = 1; i <= 10; i++) {
            this.list.push(i);
          }
          //this.allLoaded = true;// 若数据已全部获取完毕
          this.$refs.loadmore.onBottomLoaded();
        },
        showDetail(){
          this.$router.push({path:'/jobMessage'});
        }
      }
    }
</script>

<style scoped>
@import "../../../assets/css/common.css";
#list_title{
  height: 4rem;
  line-height: 4rem;
}
#list_left{
  font-size: larger;
  display: inline-block;
  float: left;
  margin-left: 1rem;
}
.list_2_div{
  font-size: large;
  font-weight: bold;
  text-align: left;
  line-height: 5rem;
}
.span_title{
  margin-left: 1rem;
}
.span_price{
  float: right;
  margin-right: 1rem;
  color: #ff862a;
}
.list_3_div{
  text-align: left;
  line-height: 3rem;
}
.county{
  margin-left: 1rem
}
.time_slot{
  margin-left: 1rem;
}
.mint-loadmore {
  height: 83vh;
}
</style>
